<!DOCTYPE html>
<%@page import="br.com.megaacerto.dto.UsuarioLogadoDTO" %>
    <html ng-app="plunker">

<head>
	<jsp:include page="/page/header.jsp"></jsp:include>
</head>

    <body ng-controller="CarrinhoController" ng-init="iniciarCarrinho();" class="page-in">


        <div ng-include="'page/menu-include.jsp'"></div>


        <!-- modal login -->

        <div class="modal" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Login</h4>
                    </div>

                    <div class="modal-body">

                        <form class="form-horizontal" action="login" method="post" name="myForm">

                            <div class="form-group">
                                <label for="inputEmail" class="control-label col-xs-2">Email</label>
                                <div class="col-xs-10">
                                    <input type="email" class="form-control" id="inputEmail" placeholder="Email" name="user" ng-required="true">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputPassword" class="control-label col-xs-2">Senha</label>
                                <div class="col-xs-10">
                                    <input type="password" class="form-control" id="inputPassword" placeholder="Senha" name="senha" ng-minlength="6" ng-required="true">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-offset-2 col-xs-10">
                                    <button type="submit" class="btn btn-primary" ng-click="limparCarrinho();" ng-disabled="myForm.$invalid">Login</button>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-offset-2 col-xs-10">
                                    <label><a href="page/usuario.html">CADASTRE-SE</a>||<a href="page/recuperarSenha.html">Esqueci minha senha</a>
                                    </label>
                                </div>
                            </div>
                        </form>

                    </div>

                </div>
            </div>
        </div>

        <!-- modal login (fim) -->


        <div class="container clear-top">

            <div class="page-title">Carrinho</div>

            <div ng-show="!mensagem" class="jumbotron">

                <div class="bs-component clearfix carrinho">

                    <legend>{{legenda}}</legend>

                    <table class="table table-striped table-hover table-carrinho" ng-show="exibeOpcoes">
                        <thead>
                            <tr>
                                <th width="25%">Tipo de Jogo</th>
                                <th width="15%">Identificador</th>
                                <th class="text-right" width="20%">Valor cota</th>
                                <th class="text-center" width="20%">Quantidade</th>
                                <th class="text-right" width="20%">Total</th>
                                <th class="text-right" width="5%"></th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="(k,carrinho) in carrinhoBoloes">
                            <tr ng-class="classTrCarrinho(carrinho.bolao.tipoDeJogo)">
                                <td>{{getNomeTipoDeJogo(carrinho.bolao.tipoDeJogo) }}</td>
                                <td>{{carrinho.bolao.identificadorGrupo}}</td>
                                <td class="text-right">{{carrinho.bolao.valorCota | currency:'R$'}}</td>
                                <td class="text-center">{{carrinho.qtdCota}}</td>
                                <td class="text-right">{{carrinho.bolao.valorCota * carrinho.qtdCota | currency:'R$'}}</td>
                                <td class="text-left">
                                    <a href="#" ng-click="removerByBolao(carrinho)">
                                        <img alt="" ng-src="img/ico-lixo.png">
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <a href="#" ng-show="exibeOpcoes" ng-click="removerTodos()">Remover Todos</a>

                    <span ng-show="!exibeOpcoes">

                        <h4>Seu carrinho está vazio, clique <a href="/">aqui</a> e aproveite um bolão.</h4>

                    </span>

                    <div class="info-carrinho" ng-show="exibeOpcoes">

                        <span class="amount">Valor total: {{total | currency:'R$'}}</span>

                        <button class="btn btn-primary">Finalizar</button>

                        <div id="source-button" class="btn btn-primary btn-xs" style="display: none;">&lt; &gt;</div>
                    </div>
                </div>
            </div>

            <div ng-show="mensagem" class="jumbotron">
                <h4><b>{{mensagem}}</b> Clique <a href="/">aqui</a> e aproveite um bolão.</h4>
            </div>

        </div>


        <!-- inicio footer -->


        <footer class="footer ng-scope clearfix">

            <div class="footer-top">
                <h3>Formas de pagamento</h3>
                <img src="img/pagamento.png">
            </div>


            <div class="footer-bottom">
                <div class="in-footer clearfix">
                    <span class="pull-left">© 2014 | Mega Acerto</span>
                    <ul class="pull-right social list-inline">
                        <li>
                            <a href="#">
                                <img src="img/face.png">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/twitter.png">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


        </footer>

       	<jsp:include page="/page/scripts.jsp"/>
       
    </body>

    </html>